<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <%@ include file="/common/client/header.jsp" %>
    <script src="${ctx}/statics/js/manager/manager.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<%@ include file="/common/manager/searchBar.jsp" %>
<!--End Header End-->
<div class="i_bg bg_color">
    <!--Begin 用户中心 Begin -->
    <div class="m_content">
        <%@ include file="/common/manager/leftBar.jsp" %>
        <div class="m_right" id="content">
            <div class="mem_tit">商品列表
                <input type="text" id="searchKeyword" placeholder="请输入关键字">
                <button onclick="searchProducts()">搜索</button>
                <button onclick="depreciation()">重置</button>
            </div>


            <br>
            <table border="0" class="order_tab" style="width:930px; text-align:center; margin-bottom:30px;"
                   cellspacing="0" cellpadding="0">
                <tbody id="trhood">
                </tbody>
            </table>
            <%--分页--%>
            <div class="pages" id="classPages">
                <a class="p_pre" onclick="firstpage()">首页</a>
                <a class="" onclick="previouspage()">上一页</a>
                <a class="" onclick="nextpage()">下一页</a>
                <a class="p_pre" onclick="lastpage()">尾页</a>
            </div>
            <div class="pages" id="classPagestwo">
                <a class="p_pre" onclick="firstpagetwo()">首页</a>
                <a class="" onclick="previouspagetwo()">上一页</a>
                <a class="" onclick="nextpagetwo()">下一页</a>
                <a class="p_pre" onclick="lastpagetwo()">尾页</a>
            </div>
            <%--分页end--%>
        </div>
    </div>
    <%@ include file="/common/client/footer.jsp" %>
</div>
<script>


    // 声明全局变量
    var news; // 商品数据
    var position = 0; // 当前页数
    var newstwo; // 第二个商品数据（搜索结果）
    var positiontwo = 0; // 第二个商品数据的当前页数

    // 页面加载时调用 depreciation 函数
    function depreciation() {
        onDocumentReady();
    }

    // 处理搜索操作的函数
    function searchProducts() {
        // 获取输入的搜索关键字
        var keyword = document.getElementById("searchKeyword").value;

        // 使用一个标志变量来跟踪是否找到匹配的商品
        var foundMatch = false;

        // 重置搜索结果和分页
        newstwo = null;
        positiontwo = 0;

        // 创建一个HTML字符串以显示商品列表
        let html = '<tr id="trone">' +
            '<td width="10%">商品名称</td>' +
            '<td width="10%">商品图片</td>' +
            '<td width="5%">库存</td>' +
            '<td width="10%">价格</td>' +
            '<td width="10%" colspan="2">操作</td>' +
            '</tr>';

        // 遍历商品数据
        $.each(news, function (index, tGood) {
            $.each(tGood, function (idex, tGoods) {
                // 如果搜索关键字与商品名称匹配
                if (tGoods.goods_name.includes(keyword)) {
                    // 添加匹配商品的HTML到列表
                    html += '<tr>' +
                        '<td>' + tGoods.goods_name + '</td>' +
                        '<td>' +
                        '<a  target="_blank">' +
                        '<img src="${ctx}/files/' + tGoods.file_name + '" width="50" height="50" />' +
                        '</a>' +
                        '</td>' +
                        '<td>' + tGoods.stock + '</td>' +
                        '<td>' + tGoods.price + '</td>' +
                        '<td><a href="${ctx}/manager/goods/toAddGoods.jsp?id=' + tGoods.id + '">修改</a></td>' +
                        '<td><a href="javascript:void(0);" onclick="deleteGoods(' + tGoods.id + ')">删除</a></td>' +
                        '</tr>';

                    // 将匹配商品放入新的数组
                    var emptyArray = [];
                    emptyArray.push(tGoods);
                    newstwo = chunk(emptyArray, 5);

                    // 设置标志变量为 true，表示找到了匹配的商品
                    foundMatch = true;
                    positiontwo = 0;

                    // 隐藏具有 id "classPages" 的元素
                    document.getElementById("classPages").style.display = "none";

                    // 显示具有 id "classPagestwo" 的元素
                    document.getElementById("classPagestwo").style.display = "block";

                    // 中断循环
                    return false;
                }
            });

            // 如果找到匹配的商品，中断外部循环
            if (foundMatch) {
                return false;
            }
        });

        // 清空商品列表并添加新的HTML
        $("#trhood").empty();
        $("#trhood").append(html);

        // 跳转到第一页的函数
        function firstpage() {
            if (position == 0) {
                showMessage("目前位置首页");
            } else {
                position = 0;
                eachAll(position);
            }
        };

        // 跳转到最后一页的函数
        function lastpage() {
            if (position == news.length - 1) {
                showMessage("目前位置尾页");
            } else {
                position = news.length - 1;
                eachAll(position);
            }
        };

        // 跳转到前一页的函数
        function previouspage() {
            if (position > 0) {
                position = position - 1;
                eachAll(position);
            } else {
                showMessage("目前位置首页");
            }
        };

        // 跳转到下一页的函数
        function nextpage() {
            if (position < news.length - 1) {
                position = position + 1;
                eachAll(position);
            } else {
                showMessage("目前位置尾页");
            }
        }

        // 检查标志变量，如果没有找到匹配的商品，显示提示信息
        if (!foundMatch) {
            alert("未找到匹配的商品");
            onDocumentReady();
        }
    }

    // 删除商品的函数
    function deleteGoods(id) {
        $.ajax({
            url: "/myDelect", // 请求的URL
            method: "GET", // 请求方法为GET
            data: {"id": id}, // 传递的数据
        }).done(function (data) {
            if (data == "true") {
                onDocumentReady(); // 成功后重新加载数据
                showMessage("删除成功");
            } else {
                showMessage("删除失败");
            }
        });
    }

    // 跳转到第一页的函数
    function firstpagetwo() {
        if (positiontwo == 0) {
            showMessage("目前位置已在首页");
        } else {
            positiontwo = 0;
            eachAlltwo(positiontwo);
        }
    }

    // 跳转到最后一页的函数
    function lastpagetwo() {
        if (positiontwo == newstwo.length - 1) {
            showMessage("目前位置已在尾页");
        } else {
            positiontwo = newstwo.length - 1;
            eachAlltwo(positiontwo);
        }
    }

    // 跳转到前一页的函数
    function previouspagetwo() {
        if (positiontwo == 0) {
            showMessage("目前位置首页");
        } else if (positiontwo > 0) {
            positiontwo = newstwo.length - 1;
            eachAlltwo(positiontwo);
        } else {
            showMessage("目前位置首页");
        }
    }

    // 跳转到下一页的函数
    function nextpagetwo() {
        if (positiontwo == newstwo.length - 1) {
            showMessage("目前位置尾页");
        } else if (positiontwo < newstwo.length - 1) {
            positiontwo = newstwo.length + 1;
            eachAlltwo(positiontwo);
        } else {
            showMessage("目前位置尾页");
        }
    }

    // 跳转到第一页的函数（第一个商品列表）
    function firstpage() {
        position = 0;
        eachAll(position);
    }

    // 跳转到最后一页的函数（第一个商品列表）
    function lastpage() {
        position = news.length - 1;
        eachAll(position);
    }

    // 跳转到前一页的函数（第一个商品列表）
    function previouspage() {
        if (position > 0) {
            position = position - 1;
            eachAll(position);
        } else {
            showMessage("目前位置首页");
        }
    }

    // 跳转到下一页的函数（第一个商品列表）
    function nextpage() {
        if (position < news.length - 1) {
            position = position + 1;
            eachAll(position);
        } else {
            showMessage("目前位置尾页");
        }
    }

    // 将数组切分成指定大小的块的函数
    function chunk(arr, size) {
        let result = [];
        while (arr.length) {
            result.push(arr.splice(0, size));
        }
        return result;
    }

    // 页面加载完成时的处理函数
    $(document).ready(onDocumentReady);

    // 处理页面加载完成后的函数
    function onDocumentReady() {
        // 发起AJAX请求获取商品数据
        $.ajax({
            url: "/ProductServlet", // 请求的URL
            method: "GET", // 请求方法为GET
            dataType: "json", // 数据类型为JSON
        }).done(function (data) {
            var html = ""; // 用于存储生成的HTML
            news = chunk(data, 5); // 将数据切分成大小为5的块
            eachAll(position); // 显示当前页的数据
        });
    }

    // 生成并显示商品列表的函数
    function eachAll(page) {
        let html = '<tr id="trone">' +
            '<td width="10%">商品名称</td>' +
            '<td width="10%">商品图片</td>' +
            '<td width="5%">库存</td>' +
            '<td width="10%">价格</td>' +
            '<td width="10%" colspan="2">操作</td>' +
            '</tr>';
        if (news[page] == undefined) {
            position = page - 1;
            $.each(news[position], function (index, tGoods) {
                html += '<tr>' +
                    '<td>' + tGoods.goods_name + '</td>' +
                    '<td>' +
                    '<a  target="_blank">' +
                    '<img src="${ctx}/files/' + tGoods.file_name + '" width="50" height="50" />' +
                    '</a>' +
                    '</td>' +
                    '<td>' + tGoods.stock + '</td>' +
                    '<td>' + tGoods.price + '</td>' +
                    '<td><a href="${ctx}/manager/goods/toAddGoods.jsp?id=' + tGoods.id + '">修改</a></td>' +
                    '<td><a href="javascript:void(0);" onclick="deleteGoods(' + tGoods.id + ')">删除</a></td>' +
                    '</tr>';
            });
        } else {
            $.each(news[page], function (index, tGoods) {
                html += '<tr>' +
                    '<td>' + tGoods.goods_name + '</td>' +
                    '<td>' +
                    '<a  target="_blank">' +
                    '<img src="${ctx}/files/' + tGoods.file_name + '" width="50" height="50" />' +
                    '</a>' +
                    '</td>' +
                    '<td>' + tGoods.stock + '</td>' +
                    '<td>' + tGoods.price + '</td>' +
                    '<td><a href="${ctx}/manager/goods/toAddGoods.jsp?id=' + tGoods.id + '">修改</a></td>' +
                    '<td><a href="javascript:void(0);" onclick="deleteGoods(' + tGoods.id + ')">删除</a></td>' +
                    '</tr>';
            });
        }

        // 显示具有 id "classPages" 的元素
        document.getElementById("classPages").style.display = "block";

        // 隐藏具有 id "classPagestwo" 的元素
        document.getElementById("classPagestwo").style.display = "none";

        // 清空原内容
        $("#trhood").empty();
        $("#trhood").append(html);
    }


</script>

</body>

</html>


